@import 'variables';
@import 'mixins';

.login-wrap {
    padding-top: 40px;
    padding-left: 25px;
    padding-right: 25px;
    > .form-option {
        > img {
            position: absolute;
            left: 25px;
            top: 18px;
            width: 30px;
        }
    }
    & input {
        width: 100%;
    }
    & button {
        width: 100%;
    }
    > .form-option {
        &:nth-child(1), &:nth-child(2){
            > input {
                padding-left: 80px;
            }
        }
    }
}

.login-link {
    display: flex;
    display: -webkit-flex;
    padding: 15px 25px 50px;
    border-bottom: 1px solid @border-color;
    > a {
        display: block;
        flex-grow: 1;
        font-size: @font-size-base;
        color: @text-base-color;
        &:nth-child(1){
            text-align: left;
        }
        &:nth-child(2){
            text-align: right;
        }
    }
}

.login-other {
    padding: 76px 25px 160px;
    overflow: hidden;
    > h3 {
        margin-bottom: 35px;
        font-size: @font-size-base;
        font-weight: 100;
        color: @text-base-color;
        text-align: center;
    }
    ul {
        > li {
            float: left;
            width: 120px;
            height: 120px;
            margin-right: 30px;
            > img {
                display: block;
                width: 100%;
                height: 100%;
            }
            &:last-child {
                margin-right: 0;
            }
        }
    }
}

.form-reg {
    > input {
        width: 380px;
    }
    > span {
        float: @float-right;
        width: 200px;
        height: 68px;
        background-color: #fff;
        border: 1px solid @border-color;
        border-radius: @border-radius-base;
    }
}

.no-login {
    padding: 0 25px 40px;
    > .btn {
        width: 100%;
    }
}

